<template>
	<view class="app-container">
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 首页 -->
			<view v-if="currentTab === 0" class="home-page">
				<!-- 预览区域 -->
				<view class="preview-section">
					<view class="preview-card">
						<view class="color-preview">
							<view v-for="(color, index) in currentColors" :key="index" class="color-block"
								:style="{ backgroundColor: color }"></view>
						</view>
						<view class="color-info">
							<text class="color-title">当前配色方案</text>
							<view class="color-values">
								<text v-for="(color, index) in currentColors" :key="index" class="color-value">{{ color
									}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 调色板选择区 -->
				<view class="palette-section">
					<text class="section-title">调色板</text>
					<scroll-view scroll-x class="palette-scroll">
						<view class="palette-list">
							<view v-for="(palette, index) in colorPalettes" :key="index"
								class="palette-item cursor-pointer" :class="{ active: selectedPalette === index }"
								@click="selectPalette(index)">
								<view class="palette-colors">
									<view v-for="(color, colorIndex) in palette.colors" :key="colorIndex"
										class="mini-color-block" :style="{ backgroundColor: color }"></view>
								</view>
								<text class="palette-name">{{ palette.name }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 颜色编辑区 -->
				<view class="editor-section">
					<text class="section-title">颜色编辑</text>
					<view class="editor-card">
						<view class="current-color-display">
							<view class="current-color-block" :style="{ backgroundColor: editingColor }"></view>
							<view class="color-input-group">
								<text class="color-label">HEX:</text>
								<input class="color-input" v-model="editingColorHex" @input="updateColorFromHex"
									placeholder="#FF6B6B" />
							</view>
						</view>
						<view class="sliders">
							<!-- <view class="slider-group">
                <text class="slider-label">色相</text>
                <slider
                  class="color-slider"
                  :value="hue"
                  @change="updateHue"
                  max="360"
                  activeColor="#8B4513"
                />
              </view> -->
							<view class="slider-group">
								<text class="slider-label">饱和度</text>
								<slider class="color-slider" :value="saturation" @change="updateSaturation" max="100"
									activeColor="#8B4513" />
							</view>
							<view class="slider-group">
								<text class="slider-label">明度</text>
								<slider class="color-slider" :value="lightness" @change="updateLightness" max="100"
									activeColor="#8B4513" />
							</view>
						</view>
					</view>
				</view>

				<!-- 底部操作栏 -->
				<view class="action-bar">
					<button class="action-btn save-btn cursor-pointer" @click="saveScheme">
						<uni-icons type="heart-filled" size="18" color="#FFFFFF"></uni-icons>
						<text class="btn-text">保存方案</text>
					</button>
					<button class="action-btn random-btn cursor-pointer" @click="randomColors">
						<uni-icons type="refreshempty" size="18" color="#8B4513"></uni-icons>
						<text class="btn-text">随机搭配</text>
					</button>
					<button class="action-btn clear-btn cursor-pointer" @click="clearColors">
						<uni-icons type="clear" size="18" color="#666666"></uni-icons>
						<text class="btn-text">清空</text>
					</button>
				</view>
			</view>

			<!-- 搭配记录页面 -->
			<view v-if="currentTab === 1" class="record-page">
				<view class="page-header">
					<text class="page-title">我的搭配</text>
					<text class="record-count">共{{ savedSchemes.length }}个方案</text>
				</view>

				<scroll-view scroll-y class="record-list" v-if="savedSchemes.length > 0">
					<view class="record-grid">
						<view v-for="(scheme, index) in savedSchemes" :key="index" class="record-item cursor-pointer"
							@click="loadScheme(scheme)" @longpress="deleteScheme(index)">
							<view class="record-colors">
								<view v-for="(color, colorIndex) in scheme.colors" :key="colorIndex"
									class="record-color-block" :style="{ backgroundColor: color }"></view>
							</view>
							<view class="record-info">
								<text class="record-name">{{ scheme.name }}</text>
								<text class="record-time">{{ scheme.createTime }}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<view v-else class="empty-state">
					<uni-icons type="color" size="60" color="#CCCCCC"></uni-icons>
					<text class="empty-text">暂无保存的配色方案</text>
					<text class="empty-tip">去首页创建你的第一个配色方案吧</text>
				</view>
			</view>

			<!-- 幸运色页面 -->
			<view v-if="currentTab === 2" class="lucky-page">
				<view class="lucky-header">
					<uni-icons type="star" size="60" color="#FFD700"></uni-icons>
					<text class="lucky-title">测测我的今日幸运色</text>
				</view>
				<view class="lucky-color-section">
					<view class="lucky-color-block" :style="{ backgroundColor: luckyColor.hex }"></view>
					<text class="lucky-color-hex">{{ luckyColor.hex }}</text>
					<text class="lucky-color-desc">{{ luckyColor.desc }}</text>
				</view>
				<button class="lucky-refresh-btn" @click="generateLuckyColor">重新测一测</button>
				<button class="lucky-scheme-btn" @click="generateLuckyScheme">生成幸运配色方案</button>
			</view>
			<!-- 我的页面 -->
			<view v-if="currentTab === 3" class="profile-page">
				<view class="profile-header">
					<view class="avatar-section">
							<image class="avatar" src="../static/logo.png" mode="aspectFill" />
						<text class="username">个人记账本</text>
					</view>
				</view>

				<view class="profile-content">
					<view class="stats-section">
						<view class="stat-item">
							<text class="stat-number">{{ savedSchemes.length }}</text>
							<text class="stat-label">配色方案</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">{{ colorPalettes.length }}</text>
							<text class="stat-label">调色板</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">{{ usageDays }}</text>
							<text class="stat-label">使用天数</text>
						</view>
					</view>

					<view class="menu-section">
						<view class="menu-item cursor-pointer" @click="clearCache">
							<view class="menu-left">
								<uni-icons type="trash" size="20" color="#8B4513"></uni-icons>
								<text class="menu-text">清空缓存</text>
							</view>
							<view class="menu-right">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>

						<view class="menu-item cursor-pointer" @click="showHelp">
							<view class="menu-left">
								<uni-icons type="help" size="20" color="#8B4513"></uni-icons>
								<text class="menu-text">使用帮助</text>
							</view>
							<view class="menu-right">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>

						<view class="menu-item cursor-pointer" @click="showAbout">
							<view class="menu-left">
								<uni-icons type="info" size="20" color="#8B4513"></uni-icons>
								<text class="menu-text">隐私政策</text>
							</view>
							<view class="menu-right">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>
						<view class="menu-item cursor-pointer" @click="showServiceAgreement">
							<view class="menu-left">
								<uni-icons type="compose" size="20" color="#8B4513"></uni-icons>
								<text class="menu-text">用户协议</text>
							</view>
							<view class="menu-right">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>
						<view class="menu-item cursor-pointer" @click="showFeedback">
							<view class="menu-left">
								<uni-icons type="chat" size="20" color="#8B4513"></uni-icons>
								<text class="menu-text">举报反馈</text>
							</view>
							<view class="menu-right">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部标签栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item cursor-pointer"
				:class="{ active: currentTab === index }" @click="switchTab(index)">
				<uni-icons :type="tab.icon" :size="24"
					:color="currentTab === index ? '#8B4513' : '#999999'"></uni-icons>
				<text class="tab-text" :class="{ active: currentTab === index }">{{ tab.name }}</text>
			</view>
		</view>

		<!-- 隐私政策弹窗组件 -->
		<privacy-modal :visible="showPrivacyModal" @privacy-policy="onPrivacyPolicy"
			@privacy-confirm="onPrivacyConfirm" />
	</view>
</template>

<script>
// import PrivacyModal from '../components/privacy-modal.vue'
import PrivacyModal from './modal.vue'
export default {
	components: {
		PrivacyModal
	},
	data() {
		return {
			tabs: [{
				name: "首页",
				icon: "home"
			},
			{
				name: "搭配记录",
				icon: "heart"
			},
			{
				name: "幸运色",
				icon: "star"
			},
			{
				name: "我的",
				icon: "person"
			},
			],
			currentTab: 0,
			currentColors: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"],
			colorPalettes: [{
				name: "温暖秋日",
				colors: ["#D2691E", "#CD853F", "#DEB887", "#F4A460"],
			},
			{
				name: "清新春天",
				colors: ["#98FB98", "#90EE90", "#32CD32", "#228B22"],
			},
			{
				name: "浪漫粉色",
				colors: ["#FFB6C1", "#FFC0CB", "#FF69B4", "#FF1493"],
			},
			{
				name: "海洋蓝调",
				colors: ["#87CEEB", "#4682B4", "#1E90FF", "#0000CD"],
			},
			{
				name: "日落黄昏",
				colors: ["#FFD700", "#FFA500", "#FF8C00", "#FF4500"],
			},
			{
				name: "紫色梦幻",
				colors: ["#DDA0DD", "#DA70D6", "#BA55D3", "#9370DB"],
			},
			],
			selectedPalette: 0,
			editingColor: "#FF6B6B",
			editingColorHex: "#FF6B6B",
			hue: 0,
			saturation: 70,
			lightness: 60,
			savedSchemes: [],
			isDarkMode: false,
			usageDays: 1,
			showPrivacyModal: false,
			luckyColor: {
				hex: "#FFD700",
				desc: "金色，象征着好运和财富，今天适合大胆尝试新事物！",
			},
		};
	},
	methods: {
		switchTab(index) {
			this.currentTab = index;
			if (index === 2) {
				this.generateLuckyColor();
			}
		},
		selectPalette(index) {
			this.selectedPalette = index;
			this.currentColors = [...this.colorPalettes[index].colors];
			this.editingColor = this.currentColors[0];
			this.editingColorHex = this.currentColors[0];
			this.updateHSLFromHex(this.currentColors[0]);
		},
		hslToHex(h, s, l) {
			l /= 100;
			const a = (s * Math.min(l, 1 - l)) / 100;
			const f = (n) => {
				const k = (n + h / 30) % 12;
				const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
				return Math.round(255 * color)
					.toString(16)
					.padStart(2, "0");
			};
			return `#${f(0)}${f(8)}${f(4)}`;
		},
		hexToHsl(hex) {
			const r = parseInt(hex.slice(1, 3), 16) / 255;
			const g = parseInt(hex.slice(3, 5), 16) / 255;
			const b = parseInt(hex.slice(5, 7), 16) / 255;
			const max = Math.max(r, g, b);
			const min = Math.min(r, g, b);
			let h = 0;
			let s = 0;
			const l = (max + min) / 2;
			if (max !== min) {
				const d = max - min;
				s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
				switch (max) {
					case r:
						h = (g - b) / d + (g < b ? 6 : 0);
						break;
					case g:
						h = (b - r) / d + 2;
						break;
					case b:
						h = (r - g) / d + 4;
						break;
				}
				h /= 6;
			}
			return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
		},
		updateHSLFromHex(hexColor) {
			const [h, s, l] = this.hexToHsl(hexColor);
			this.hue = h;
			this.saturation = s;
			this.lightness = l;
		},
		updateHue(e) {
			this.hue = e.detail.value;
			this.updateColorFromHSL();
		},
		updateSaturation(e) {
			this.saturation = e.detail.value;
			this.updateColorFromHSL();
		},
		updateLightness(e) {
			this.lightness = e.detail.value;
			this.updateColorFromHSL();
		},
		updateColorFromHSL() {
			const newColor = this.hslToHex(this.hue, this.saturation, this.lightness);
			this.editingColor = newColor;
			this.editingColorHex = newColor;
			this.currentColors.splice(0, 1, newColor);
		},
		updateColorFromHex() {
			if (this.editingColorHex.match(/^#[0-9A-F]{6}$/i)) {
				this.editingColor = this.editingColorHex;
				this.currentColors.splice(0, 1, this.editingColorHex);
				this.updateHSLFromHex(this.editingColorHex);
			}
		},
		randomColors() {
			const newColors = [];
			for (let i = 0; i < 4; i++) {
				const randomHue = Math.floor(Math.random() * 360);
				const randomSat = Math.floor(Math.random() * 50) + 50;
				const randomLight = Math.floor(Math.random() * 40) + 40;
				newColors.push(this.hslToHex(randomHue, randomSat, randomLight));
			}
			this.currentColors = newColors;
			this.editingColor = newColors[0];
			this.editingColorHex = newColors[0];
			this.updateHSLFromHex(newColors[0]);
		},
		clearColors() {
			this.currentColors = ["#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF"];
			this.editingColor = "#FFFFFF";
			this.editingColorHex = "#FFFFFF";
			this.hue = 0;
			this.saturation = 0;
			this.lightness = 100;
		},
		saveScheme() {
			const now = new Date();
			const scheme = {
				name: `配色方案 ${this.savedSchemes.length + 1}`,
				colors: [...this.currentColors],
				createTime: `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`,
			};
			this.savedSchemes.unshift(scheme);
			this.saveToStorage();
			uni.showToast({
				title: "保存成功",
				icon: "success",
			});
		},
		loadScheme(scheme) {
			this.currentColors = [...scheme.colors];
			this.editingColor = scheme.colors[0];
			this.editingColorHex = scheme.colors[0];
			this.updateHSLFromHex(scheme.colors[0]);
			this.currentTab = 0;
			uni.showToast({
				title: "已加载配色方案",
				icon: "success",
			});
		},
		deleteScheme(index) {
			uni.showModal({
				title: "确认删除",
				content: "确定要删除这个配色方案吗？",
				success: (res) => {
					if (res.confirm) {
						this.savedSchemes.splice(index, 1);
						this.saveToStorage();
						uni.showToast({
							title: "删除成功",
							icon: "success",
						});
					}
				},
			});
		},
		toggleTheme() {
			this.isDarkMode = !this.isDarkMode;
			this.saveToStorage();
			uni.showToast({
				title: this.isDarkMode ? "已切换到暗色模式" : "已切换到明亮模式",
				icon: "success",
			});
		},
		clearCache() {
			uni.showModal({
				title: "确认清空",
				content: "清空缓存将删除所有保存的配色方案，确定继续吗？",
				success: (res) => {
					if (res.confirm) {
						this.savedSchemes = [];
						this.saveToStorage();
						uni.removeStorageSync('privacyPolicyShown666');
						uni.showToast({
							title: "缓存已清空",
							icon: "success",
						});
					}
				},
			});
		},
		showHelp() {
			// uni.showModal({
			//   title: "使用帮助",
			//   content:
			//     "1. 在首页选择调色板或自定义颜色\n2. 使用滑块调节色相、饱和度、明度\n3. 点击保存方案保存当前配色\n4. 在搭配记录中查看和管理已保存的方案",
			//   showCancel: false,
			// });
			uni.navigateTo({
				url: '/pages/index1',
			});
		},
		showAbout() {
			uni.navigateTo({
				url: '/pages/yinsi',
			});
		},
		showServiceAgreement() {
			uni.navigateTo({
				url: '/pages/xieyi',
			});
		},
		showFeedback() {
			uni.navigateTo({
				url: '/pages/feedback',
			});
		},
		showPrivacyPolicyModal() {
			const shown = uni.getStorageSync('privacyPolicyShown666');
			if (!shown) {
				this.showPrivacyModal = true;
			}
		},
		onPrivacyConfirm() {
			uni.setStorageSync('privacyPolicyShown666', true);
			this.showPrivacyModal = false;
		},
		saveToStorage() {
			const data = {
				savedSchemes: this.savedSchemes,
				isDarkMode: this.isDarkMode,
				usageDays: this.usageDays,
			};
			uni.setStorageSync("bearColorData", data);
		},
		loadFromStorage() {
			try {
				const data = uni.getStorageSync("bearColorData");
				if (data) {
					this.savedSchemes = data.savedSchemes || [];
					this.isDarkMode = data.isDarkMode || false;
					this.usageDays = data.usageDays || 1;
				}
			} catch (e) {
				console.log("加载本地数据失败", e);
			}
		},
		generateLuckyColor() {
			// 每次点击都随机一个幸运色
			const luckyColors = [{
				hex: "#FFD700",
				desc: "金色，象征着好运和财富，今天适合大胆尝试新事物！"
			},
			{
				hex: "#4ECDC4",
				desc: "青绿色，带来清新和活力，适合开启新计划。"
			},
			{
				hex: "#FF6B6B",
				desc: "珊瑚红，充满热情，适合表达自我。"
			},
			{
				hex: "#45B7D1",
				desc: "天蓝色，平静理智，适合专注学习和工作。"
			},
			{
				hex: "#96CEB4",
				desc: "薄荷绿，舒缓心情，适合放松休息。"
			},
			{
				hex: "#FFA500",
				desc: "橙色，活力四射，适合社交和运动。"
			},
			{
				hex: "#9370DB",
				desc: "紫色，神秘优雅，适合思考和创作。"
			},
			];
			let index = Math.floor(Math.random() * luckyColors.length);
			// 避免和当前 luckyColor 重复
			if (this.luckyColor && luckyColors[index].hex === this.luckyColor.hex && luckyColors.length > 1) {
				index = (index + 1) % luckyColors.length;
			}
			this.luckyColor = luckyColors[index];
		},
		generateLuckyScheme() {
			// 以幸运色为主色，生成一组和谐配色
			const baseColor = this.luckyColor.hex;
			// 简单算法：主色+3个随机色
			const randomColor = () => {
				const letters = '0123456789ABCDEF';
				let color = '#';
				for (let i = 0; i < 6; i++) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			};
			const scheme = [baseColor];
			while (scheme.length < 4) {
				const c = randomColor();
				if (!scheme.includes(c)) scheme.push(c);
			}
			this.currentColors = scheme;
			this.editingColor = scheme[0];
			this.editingColorHex = scheme[0];
			this.updateHSLFromHex(scheme[0]);
			this.currentTab = 0;
			uni.showToast({
				title: '已生成幸运配色',
				icon: 'success'
			});
		},
	},
	onLoad() {
		this.loadFromStorage();
		this.selectPalette(0);
		// this.showPrivacyPolicyModal();
	},
	onShow() {
		this.showPrivacyPolicyModal();
	},
};
</script>

<style>
page {
	height: 100%;
}

.cursor-pointer {
	cursor: pointer;
}

.app-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #f8f9fa;
}

/* 顶部导航栏 */
.top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #e5e5e5;
	z-index: 1000;
}

.nav-title {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

/* 主内容区域 */
.main-content {
	flex: 1;
	/* margin-top: 88rpx; */
	margin-bottom: 120rpx;
	overflow: auto;
}

/* 首页样式 */
.home-page {
	padding: 32rpx;
	padding-top: 10rpx;
}

.preview-section {
	margin-bottom: 32rpx;
}

.preview-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.color-preview {
	display: flex;
	height: 170rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
}

.color-block {
	flex: 1;
	transition: all 0.3s ease;
}

.color-info {
	text-align: center;
}

.color-title {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	display: block;
	margin-bottom: 16rpx;
}

.color-values {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.color-value {
	font-size: 12px;
	color: #666666;
	background-color: #f5f5f5;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	margin: 4rpx;
}

/* 调色板区域 */
.palette-section {
	margin-bottom: 32rpx;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	display: block;
	margin-bottom: 16rpx;
}

.palette-scroll {
	overflow: auto;
}

.palette-list {
	display: flex;
	padding: 16rpx 0;
	padding-left: 20rpx;
}

.palette-item {
	flex-shrink: 0;
	width: 160rpx;
	margin-right: 24rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 16rpx;
	text-align: center;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}

.palette-item.active {
	border-color: #8b4513;
	transform: scale(1.05);
}

.palette-colors {
	display: flex;
	height: 60rpx;
	border-radius: 8rpx;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.mini-color-block {
	flex: 1;
}

.palette-name {
	font-size: 12px;
	color: #666666;
}

/* 编辑器区域 */
.editor-section {
	margin-bottom: 32rpx;
}

.editor-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.current-color-display {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;
}

.current-color-block {
	width: 80rpx;
	height: 80rpx;
	border-radius: 12rpx;
	margin-right: 24rpx;
	border: 2px solid #e5e5e5;
}

.color-input-group {
	flex: 1;
}

.color-label {
	font-size: 14px;
	color: #666666;
	display: block;
	margin-bottom: 8rpx;
}

.color-input {
	/* width: 100%; */
	height: 72rpx;
	border: 1px solid #e5e5e5;
	border-radius: 8rpx;
	padding: 0 16rpx;
	font-size: 14px;
	color: #333333;
}

.sliders {
	display: flex;
	flex-direction: column;
}

.slider-group {
	margin-bottom: 10rpx;
}

.slider-label {
	font-size: 14px;
	color: #666666;
	display: block;
	margin-bottom: 16rpx;
}

.color-slider {
	/* width: 100%; */
}

/* 操作栏 */
.action-bar {
	display: flex;
	justify-content: space-between;
	padding: 0 16rpx;
}

.action-btn {
	/* flex: 1; */
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	margin: 0 8rpx;
	border: none;
	font-size: 14px;
	transition: all 0.3s ease;
}

.save-btn {
	background-color: #8b4513;
	color: #ffffff;
}

.random-btn {
	background-color: #fff8dc;
	color: #8b4513;
	border: 1px solid #8b4513;
}

.clear-btn {
	background-color: #f5f5f5;
	color: #666666;
}

/* .btn-text {
  margin-left: 8rpx;
} */

/* 搭配记录页面 */
.record-page {
	padding: 32rpx;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
	color: #333333;
}

.record-count {
	font-size: 14px;
	color: #666666;
}

.record-list {
	height: calc(100vh - 300rpx);
	overflow: auto;
}

.record-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
}

.record-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.record-item:active {
	transform: scale(0.98);
}

.record-colors {
	display: flex;
	height: 80rpx;
	border-radius: 8rpx;
	overflow: hidden;
	margin-bottom: 16rpx;
}

.record-color-block {
	flex: 1;
}

.record-info {
	text-align: center;
}

.record-name {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	display: block;
	margin-bottom: 8rpx;
}

.record-time {
	font-size: 12px;
	color: #999999;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
	text-align: center;
}

.empty-text {
	font-size: 16px;
	color: #666666;
	margin: 24rpx 0 16rpx;
}

.empty-tip {
	font-size: 14px;
	color: #999999;
}

/* 我的页面 */
.profile-page {
	padding: 32rpx;
}

.profile-header {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx;
	text-align: center;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-bottom: 16rpx;
}

.username {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

.profile-content {
	display: flex;
	flex-direction: column;
}

.stats-section {
	display: flex;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.stat-item {
	flex: 1;
	text-align: center;
}

.stat-number {
	font-size: 24px;
	font-weight: 600;
	color: #8b4513;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 14px;
	color: #666666;
}

.menu-section {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1px solid #f5f5f5;
	transition: all 0.3s ease;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background-color: #f8f9fa;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-text {
	font-size: 16px;
	color: #333333;
	margin-left: 16rpx;
}

.menu-right {
	display: flex;
	align-items: center;
}

.menu-value {
	font-size: 14px;
	color: #666666;
	margin-right: 16rpx;
}

/* 底部标签栏 */
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #ffffff;
	display: flex;
	border-top: 1px solid #e5e5e5;
	z-index: 1000;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.tab-text {
	font-size: 12px;
	color: #999999;
	margin-top: 8rpx;
	transition: all 0.3s ease;
}

.tab-text.active {
	color: #8b4513;
	font-weight: 600;
}

.lucky-page {
	padding: 32rpx;
	text-align: center;
}

.lucky-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32rpx;
}

.lucky-title {
	font-size: 20px;
	font-weight: 600;
	color: #333333;
	margin-top: 16rpx;
}

.lucky-color-section {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	margin-bottom: 32rpx;
}

.lucky-color-block {
	width: 100%;
	height: 200rpx;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.lucky-color-hex {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 8rpx;
	display: block;
}

.lucky-color-desc {
	font-size: 16px;
	color: #666666;
	line-height: 1.6;
}

/* 优化幸运色按钮样式 */
.lucky-refresh-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #FFD700 0%, #FFB347 100%);
	color: #fff;
	border-radius: 12rpx;
	border: none;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.15);
	letter-spacing: 2px;
	transition: all 0.2s;
}

.lucky-refresh-btn:active {
	opacity: 0.85;
}

.lucky-scheme-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #4ECDC4 0%, #45B7D1 100%);
	color: #fff;
	border-radius: 12rpx;
	border: none;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	box-shadow: 0 4rpx 16rpx rgba(69, 183, 209, 0.12);
	letter-spacing: 2px;
	transition: all 0.2s;
}

.lucky-scheme-btn:active {
	opacity: 0.85;
}
</style>